<!--
 * Copyright © 2023
 * @Author: zhangxiang
 * @Date: 2023-02-02 11:12:25
 * @LastEditors: zhangxiang
 * @LastEditTime: 2023-10-18 10:29:33
 * @Description:
 *
-->

<template>
  <div class="stats-container">
    <el-row type="flex" justify="end">
      <el-radio-group v-model="radio" class="view_switch" size="medium">
        <el-radio-button label="1">云商视图</el-radio-button>
        <el-radio-button label="2">资源视图</el-radio-button>
      </el-radio-group>
    </el-row>
    <!-- 云商视图 -->
    <div
      v-if="radio == 1"
      style="
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-column-gap: 20px;
        grid-row-gap: 20px;
        margin-top: 20px;
      "
    >
      <!-- 云商图片 -->
      <el-card
        v-for="(o, index) in providerViews"
        :key="index"
        class="box_card_cloud"
      >
        <img :src="getProviderImg(o.cloudProvider)" alt="" class="image" />
        <!-- 集群图片及数据 -->
        <img :src="application" alt="" class="image_colony" />
        <div style="float: left; margin-left: 10px; margin-top: 10px">
          <div class="val_colony">
            {{ o.items[0].val }}
          </div>
          <div class="key_colony">
            {{ o.items[0].key }}
          </div>
        </div>
        <!-- 应用图片及数据 -->
        <img
          :src="colony"
          alt=""
          style="
            float: left;
            margin-left: 27px;
            margin-top: 15px;
            width: 37.5px;
            height: 37.5px;
          "
        />
        <div style="float: left; margin-left: 10px; margin-top: 10px">
          <div class="val_colony">
            {{ o.items[1].val }}
          </div>
          <div class="key_colony">
            {{ o.items[1].key }}
          </div>
        </div>
        <hr
          id="line"
          style="
            width: 450px;
            border: 1px solid;
            border-color: #f2f2f2;
            margin-top: 70px;
            margin-bottom: 15px;
          "
        />
        <!-- 资源数据 -->
        <div v-for="i in 9" :key="i" class="key_cloud">
          {{ o.items[i + 1].key
          }}<span class="val_cloud">{{ o.items[i + 1].val }}</span><span class="val_cloud">{{ o.items[i + 1].unit }}</span>
        </div>
      </el-card>
    </div>
    <!-- 资源视图 -->
    <div v-if="radio == 2" class="resources">
      <div
        v-for="(card, index) in resourceViews"
        :key="index"
        class="resource-wrapper"
      >
        <div class="top">
          <div class="name">
            {{ card.name }}
          </div>
          <div class="normalCnt">
            {{ card.normalCnt }}
          </div>
          <div class="totalCnt">
            {{ "/" + card.totalCnt }}
          </div>
        </div>
        <el-carousel
          trigger="click"
          :interval="0"
          class="resource-carousel"
          height="162px"
        >
          <el-carousel-item
            v-for="viewItemGroup in Math.ceil(card.viewItems.length / 2)"
            :key="viewItemGroup"
          >
            <div class="viewItemGroup">
              <template
                v-for="(viewItem, vidx) in card.viewItems.slice(
                  (viewItemGroup - 1) * 2,
                  (viewItemGroup - 1) * 2 + 2
                )"
              >
                <div :key="'viewItem' + vidx" class="viewItem">
                  <div class="provider">
                    <img
                      class="img"
                      :src="getProviderImg(viewItem.cloudProvider)"
                      alt=""
                    />
                  </div>
                  <div class="line"></div>
                  <div class="items">
                    <div
                      v-for="(item, itemIndex) in viewItem.items"
                      :key="itemIndex"
                      class="item"
                    >
                      <div class="value">
                        {{ item.val }}{{ item.unit || "" }}
                      </div>
                      <div class="key">
                        {{ item.key }}
                      </div>
                    </div>
                  </div>
                </div>
                <div
                  v-if="vidx === 0"
                  :key="'divider' + vidx"
                  class="divider"
                ></div>
              </template>
            </div>
          </el-carousel-item>
        </el-carousel>
      </div>
    </div>
  </div>
</template>

<script>
import { getMonitorCompute } from '@/api/monitor'

export default {
  name: 'SystemMonitorCNResStats',
  components: {}, // 组件
  data() {
    return {
      providerViews: [],
      resourceViews: [],
      img_cloud_aliyun: require('@/assets/imgs/common/img_cloud_aliyun.png'),
      img_cloud_huawei: require('@/assets/imgs/common/img_cloud_huawei.png'),
      img_cloud_openstack: require('@/assets/imgs/common/img_cloud_openstack.png'),
      img_cloud_inspur: require('@/assets/imgs/common/img_cloud_inspur.png'),
      img_cloud_tencent: require('@/assets/imgs/common/img_cloud_tencent.png'),
      application: require('@/assets/imgs/monitor/application.png'),
      colony: require('@/assets/imgs/monitor/colony.png'),
      radio: '1'
    }
  },
  created() {
    this.radio = this.$route.query.activeTab === '资源视图' ? '2' : '1'
    getMonitorCompute({}).then((response) => {
      this.providerViews = Array.isArray(response.data.providerViews)
        ? response.data.providerViews
        : []
      this.resourceViews = Array.isArray(response.data.resourceViews)
        ? response.data.resourceViews
        : []
    })
  },
  methods: {
    /**
     * @description: 获取云商图标
     * @param {*} provider
     * @return {*}
     */
    getProviderImg(provider) {
      switch (provider) {
        case '阿里云':
          return require('@/assets/imgs/common/img_cloud_aliyun.png')
        case '腾讯云':
          return require('@/assets/imgs/common/img_cloud_tencent.png')
        case '华为云':
          return require('@/assets/imgs/common/img_cloud_huawei.png')
        case 'Openstack':
          return require('@/assets/imgs/common/img_cloud_openstack.png')
        case '浪潮InCloud':
          return require('@/assets/imgs/common/img_cloud_inspur.png')
        default:
          return ''
      }
    }
  }
}
</script>

<style lang="less" scoped>
@import "@/assets/css/common.less";
.stats-container {
  box-sizing: border-box;
  background: #ffffff;
  box-shadow: 0px 0px 5px 0px rgba(217, 213, 234, 0.5);
  border-radius: 8px;
  // width: auto;
  margin: 20px;
  padding: 20px;

  .view_switch {
  }
  .box_card_cloud {
    height: 251px;
    width: 500px;
    background: #ffffff;
    border: 1px solid;
    border-color: #e1e1e1;
    border-radius: 4px;
    box-shadow: 0px 0px 5px rgba(217, 213, 234, 0.5);
  }
  .image {
    width: 70px;
    height: 70px;
    float: left;
  }
  .image_colony {
    float: left;
    margin-left: 80px;
    margin-top: 15px;
    width: 37.5px;
    height: 37.5px;
  }
  .val_colony {
    width: 12px;
    height: 28px;
    font-family: PingFang SC;
    font-weight: 600;
    color: #4a4a4a;
    font-size: 20px;
    line-height: 28px;
    text-align: center;
  }
  .key_colony {
    width: 80px;
    height: 17px;
    font-family: PingFang SC;
    color: #c3c3c3;
    font-size: 12px;
    line-height: 17px;
  }
  .key_cloud {
    width: 150px;
    height: 17px;
    font-family: PingFang SC;
    color: #c3c3c3;
    font-size: 12px;
    line-height: 17px;
    padding-top: 0px;
    padding-bottom: 50px;
    padding-right: 20px;
    padding-left: 18px;
    float: left;
  }
  .val_cloud {
    width: 15px;
    height: 20px;
    font-family: PingFang SC;
    font-weight: 500;
    color: #4a4a4a;
    font-size: 14px;
    line-height: 20px;
    text-align: center;
  }
  .resources {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-column-gap: 1.5vw;
    grid-row-gap: 1.5vw;
    margin-top: 20px;
    .resource-wrapper {
      padding: 17px 22px;
      box-sizing: border-box;
      background: #ffffff;
      box-shadow: 0px 0px 5px 0px rgba(217, 213, 234, 0.5);
      border-radius: 4px;
      border: 1px solid #e1e1e1;
      .top {
        margin-bottom: 10px;
        display: flex;
        align-items: center;
        .name {
          .textStyle(18px, 500, #4a4a4a);
          line-height: 25px;
        }
        .normalCnt {
          margin-left: auto;
          .textStyle(20px, 500, #0091ff);
          line-height: 28px;
        }
        .totalCnt {
          .textStyle(20px, 500, #C3C3C3);
          line-height: 28px;
        }
      }
      .viewItemGroup {
        height: 100%;
        padding: 0 4%;
        .divider {
          margin: 10px 0;
          height: 1px;
          background-color: #f2f2f2;
        }
        .viewItem {
          display: flex;
          align-items: center;
          .provider {
            margin-right: 7%;
            line-height: 0;
            .img {
              width: 70px;
              height: 70px;
            }
          }
          .line {
            width: 1px;
            height: 63px;
            background-color: #f2f2f2;
          }
          .items {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: space-around;

            .item {
              display: flex;
              flex-direction: column;
              align-items: center;
              .value {
                .textStyle(14px, 500, #4a4a4a);
                line-height: 20px;
              }
              .key {
                margin-top: 8px;
                .textStyle(12px , 500, #C3C3C3);
                line-height: 17px;
              }
            }
          }
        }
      }
    }
  }
}
</style>
